<!--
  Generated template for the PolicyDetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

    <ion-toolbar content-page class="fir-toolbar">
        <ion-buttons start>
            <button ion-button icon-only (click)="goBack()">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            保单详情
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>

</ion-header>

<ion-content>
    <ion-item class="policy-head" [ngClass]="{'region': (orphanType == 'I' || orphanType == 'O')}">
        <span class="first">保单号：{{policyDetail.policyID}}</span>
        <span>{{policyDetail.policyStatus}}</span>
        <div class="other-region-in" *ngIf="orphanType == 'I'">
            <span>异地服务：迁入</span>
        </div>
        <div class="other-region-out" *ngIf="orphanType == 'O'">
            <span>异地服务：迁出</span>
        </div>
    </ion-item>
    <ion-list>
        <ion-list-header>
            <span class="first">客户详情</span>
            <img [groupShowOrHide]="group1" src="./assets/images/policy/arrow-up.png" alt="">
        </ion-list-header>
        <div #group1>
            <ion-item class="info list-info2 double-line" (click)="goToClientDetail(policyDetail.policyHolderId)">
                <span class="first-info">投保人</span>

                <div col-6 class="right-info">
                    <p>
                        <img
                            [src]="policyDetail.sexPolicyHolder=='M' ?'assets/images/policy/icon_list_sexman.png':(policyDetail.sexPolicyHolder=='F'?'assets/images/policy/icon_list_sexwoman.png':'assets/images/policy/icon_list_sexunknow.png')"
                            alt="">
                        <span>{{policyDetail.policyHolder?policyDetail.policyHolder.replace('—','-'):'-'}}</span>
                        <img src="assets/images/policy/arrow-right-s.png" alt="">
                    </p>

                    <p>
                        <img src="assets/images/policy/icon_birthday.png" alt="">
                        <span>{{policyDetail.birthPolicyHolder*1000|myDate:'YYYY/MM/DD'}}</span>
                    </p>
                </div>
            </ion-item>
            <ion-item [style.height]="'19.44vw'" class="info list-info2 double-line"
                      (click)="goToClientDetail(policyDetail.recognizeeId)">
                <span class="first-info">被保险人</span>

                <div col-6 class="right-info">
                    <p>
                        <img
                            [src]="policyDetail.sexRecognizee=='M' ?'assets/images/policy/icon_list_sexman.png':(policyDetail.sexRecognizee=='F'?'assets/images/policy/icon_list_sexwoman.png':'assets/images/policy/icon_list_sexunknow.png')"
                            alt="">
                        <span>{{policyDetail.recognizee ? policyDetail.recognizee.replace('—','-') :'-'}}</span>
                        <img src="assets/images/policy/arrow-right-s.png" alt="">
                    </p>

                    <p>
                        <img src="assets/images/policy/icon_birthday.png" alt="">
                        <span>{{policyDetail.birthRecognizee*1000|myDate:'YYYY/MM/DD'}}</span>
                    </p>
                </div>
            </ion-item>
            <ion-item *ngFor="let beneficiary of BeneficiaryList;index as i" class="list-info"
                      (click)="goToBeneficiaryDetail(beneficiary,i+1)">
                <span class="first-info">受益人{{BeneficiaryList.length===1?'':i+1}}</span>
                <span>
                    {{beneficiary.clientName?beneficiary.clientName.replace('—','-'):'-'}}
                    <img src="assets/images/policy/arrow-right-s.png" alt="">
                </span>
            </ion-item>
        </div>

    </ion-list>
    <ion-list>
        <ion-list-header>
            <span class="first">保险详情</span>
            <img [groupShowOrHide]="group2" src="./assets/images/policy/arrow-d.png" alt="">
        </ion-list-header>
        <div #group2 [style.display]="'none'">
            <ion-item class="list-info">
                <span class="first-info">主险名称</span>
                <span>
                    {{policyDetail.insuranceName?policyDetail.insuranceName.replace('—','-'):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info" *ngIf="showExtraBenefit == 'Y'" (click)="goToExtraBenefitPage(policyDetail.policyID)">
            <!--<ion-item class="list-info">-->
                <span class="first-info">附加利益保障</span>
                <span class="green">
                    查看详情
                    <img src="assets/images/policy/arrow-right-s.png" alt="">
                </span>
            </ion-item>
            <!--<ion-item class="list-info">-->
                <!--<span class="first-info">IPO</span>-->
                <!--<span>-->
                    <!--{{policyDetail.ipo?policyDetail.ipo:'-'}}-->
                <!--</span>-->
            <!--</ion-item>-->
            <ion-item class="list-info">
                <span class="first-info">IPO</span>
                <span *ngIf="policyDetail.ipoFlag != 'Y'">
                    {{policyDetail.ipo}}
                </span>
                <span *ngIf="policyDetail.ipoFlag == 'Y'">
                    {{policyDetail.ipo}} {{policyDetail.ipoPct}}
                </span>
            </ion-item>
        </div>

    </ion-list>
    <ion-list>
        <ion-list-header>
            <span class="first">主险保险金详情</span>
            <img [groupShowOrHide]="group3" src="./assets/images/policy/arrow-d.png" alt="">
        </ion-list-header>
        <div #group3 [style.display]="'none'">
            <ion-item class="list-info" *ngIf="policyDetail.annuityInd == 'N'">
                <span class="first-info">保险金额</span>
                <!--<span>-->
                    <!--{{policyDetail.insuranceAmount?(policyDetail.insuranceAmount):'-'}}-->
                <!--</span>-->
                <span>
                    {{policyDetail.faceAmount?(policyDetail.faceAmount.replace('—','-')):'-'}}
                </span>
            </ion-item>


            <ion-item class="list-info">
                <span class="first-info">期满利益</span>
                <span>
                    {{policyDetail.fullInterest?('￥'+(policyDetail.fullInterest)):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">年金利益</span>
                <span>
                    {{policyDetail.annuityInterest?('￥'+(policyDetail.annuityInterest)):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">年金领取方式</span>
                <span>
                    {{policyDetail.annuityMethod?policyDetail.annuityMethod.replace('—','-'):'-'}}
                </span>
            </ion-item>
            <!--<ion-item class="list-info">-->
                <!--<span class="first-info">养老金领取年龄</span>-->
                <!--<span>-->
                    <!--{{(policyDetail.agePension && policyDetail.agePension != '-1')?policyDetail.agePension:'-'}}-->
                <!--</span>-->
            <!--</ion-item>-->
            <ion-item class="list-info" *ngIf="policyDetail.annuityInd == 'N'">
                <span class="first-info">养老金领取年龄</span>
                <span>
                    {{(policyDetail.agePension && policyDetail.agePension != '-1')?policyDetail.agePension.replace('—','-'):'-'}}
                </span>
            </ion-item>
            <!--<ion-item class="list-info" *ngIf="policyDetail.annuityInd == 'N'">-->
                <!--<span class="first-info">养老金保险金额</span>-->
                <!--<span>-->
                    <!--{{policyDetail.insuranceAmount? ('￥'+policyDetail.insuranceAmount) : '-'}}-->
                <!--</span>-->
            <!--</ion-item>-->

            <ion-item class="list-info" *ngIf="policyDetail.annuityInd == 'Y'">
                <span class="first-info">年金领取年龄</span>
                <span>
                    {{(policyDetail.epDaAge && policyDetail.epDaAge != '-1')?policyDetail.epDaAge.replace('—','-'):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info" *ngIf="policyDetail.annuityInd == 'Y'">
                <span class="first-info">年金领取期限</span>
                <span>
                    {{policyDetail.annuityDate?policyDetail.annuityDate.replace('—','-'):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info" *ngIf="policyDetail.annuityInd == 'Y'">
                <span class="first-info">月度年金领取金额</span>
                <span>
                    {{policyDetail.insuranceAmount? ('￥'+policyDetail.insuranceAmount) : '-'}}
                </span>
            </ion-item>
        </div>
    </ion-list>
    <ion-list>
        <ion-list-header>
            <span class="first">合同价值</span>
            <img [groupShowOrHide]="group4" src="./assets/images/policy/arrow-d.png" alt="">
        </ion-list-header>
        <div #group4 [style.display]="'none'">
            <ion-item class="list-info">
                <span class="first-info">保证现金价值</span>
                <span>
                    {{policyDetail.guaranteeValue?('￥'+(policyDetail.guaranteeValue)):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">退保价值</span>
                <span>
                    {{policyDetail.surrenderValue?('￥'+(policyDetail.surrenderValue)):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info" (click)="goToLoanRecordPage(policyDetail.policyID)">
                <span class="first-info">累计已贷款金额</span>
                <span class="green">
                    {{policyDetail.totalLoan?('￥'+(policyDetail.totalLoan)):'-'}}
                    <img src="assets/images/policy/arrow-right-s.png" alt="">
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">累计红利</span>
                <span>
                    {{policyDetail.dividendCum?('￥'+(policyDetail.dividendCum)):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">红利选择方式</span>
                <span>
                    {{policyDetail.dividendChoice?policyDetail.dividendChoice.replace('—','-'):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">累计现金利益给付</span>
                <span>
                    {{policyDetail.dividendPayCum?('￥'+(policyDetail.dividendPayCum)):'-'}}
                    <img [groupShowOrHide]="group9" src="./assets/images/policy/arrow-up.png" alt="">
                </span>
            </ion-item>

            <div #group9>
                <ion-item class="list-info">
                    <span class="first-info gray">现金利益选择权</span>
                    <span class="gray">
                    {{policyDetail.cashOption?policyDetail.cashOption.replace('—','-'):'-'}}
                </span>
                </ion-item>
                <ion-item class="list-info">
                    <span class="first-info gray">选择权行使时间</span>
                    <span class="gray">
                    {{policyDetail.startTimeOption*1000|myDate:'YYYY/MM/DD'}}-{{policyDetail.endTimeOption*1000|myDate:'YYYY/MM/DD'}}
                </span>
                </ion-item>
            </div>

            <ion-item class="list-info" *ngIf="policyDetail.endowCtl == 'Y'">
                <span class="first-info">现金利益给付方式</span>
                <span>
                    {{policyDetail.endowCtlDesc?policyDetail.endowCtlDesc.replace('—','-'):'-'}}
                </span>
            </ion-item>

            <ion-item class="list-info" *ngIf="policyDetail.rulUniversalFlag==='Y'"
                      (click)="goToUniversalAccountDetailPage(policyDetail.policyID)">
                <span class="first-info">万能账户详情</span>
                <span class="green">
                        查看详情
                        <img src="assets/images/policy/arrow-right-s.png" alt="">
                    </span>
            </ion-item>
            <ion-item class="list-info" *ngIf="policyDetail.rulUniversalFlag !='Y'">
                <span class="first-info">万能账户详情</span>
                <span>
                        -
                    </span>
            </ion-item>
            <ion-item class="list-info " *ngIf="policyDetail.spulFlag==='Y'"
                      (click)="goToAccountListPage(policyDetail.policyID)">
                <span class="first-info">投连账户详情</span>
                <span class="green">
                        查看详情
                        <img src="assets/images/policy/arrow-right-s.png" alt="">
                    </span>
            </ion-item>

            <ion-item class="list-info " *ngIf="policyDetail.spulFlag !='Y'">
                <span class="first-info">投连账户详情</span>
                <span>
                        -
                    </span>
            </ion-item>
            <!--<ion-item class="list-info " *ngIf="policyDetail.identityUL==='Y'"-->
                      <!--(click)="goToAccountListPage(policyDetail.policyID)">-->
                <!--<span class="first-info">投连账户详情</span>-->
                <!--<span class="green">-->
                        <!--查看详情-->
                        <!--<img src="assets/images/policy/arrow-right-s.png" alt="">-->
                    <!--</span>-->
            <!--</ion-item>-->

            <!--<ion-item class="list-info " *ngIf="policyDetail.identityUL !='Y'">-->
                <!--<span class="first-info">投连账户详情</span>-->
                <!--<span>-->
                        <!----->
                    <!--</span>-->
            <!--</ion-item>-->
        </div>
    </ion-list>
    <ion-list>
        <ion-list-header>
            <span class="first">缴费详情</span>
            <img [groupShowOrHide]="group5" src="./assets/images/policy/arrow-d.png" alt="">
        </ion-list-header>
        <div #group5 [style.display]="'none'">
            <ion-item class="list-info">
                <span class="first-info">缴费期</span>
                <span>
                    {{policyDetail.paymentPeriod?(policyDetail.paymentPeriod+'年'):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">缴费周期</span>
                <span>
                    {{policyDetail.paymentCycle?policyDetail.paymentCycle.replace('—','-'):'-'}}
                </span>
            </ion-item>
            <!--<ion-item class="list-info" *ngIf="policyStatus != '保费已缴清' && policyStatus != '豁免保费' && policyStatus != '减额缴清'">-->
                <!--<span class="first-info">下期应缴保费日</span>-->
                <!--<span>-->
                    <!--{{policyPayToDate*1000|myDate:'YYYY/MM/DD'}}-->
                <!--</span>-->
            <!--</ion-item>-->

            <ion-item class="list-info" *ngIf="'035EFHJD'.indexOf(policyStatusCode) == -1 && moment(policyPayToDate*1000).format('YYYY/MM/DD') != '1900/01/01'">
                <span class="first-info">下期应缴保费日</span>
                <span>
                    {{policyPayToDate*1000|myDate:'YYYY/MM/DD'}}
                </span>
            </ion-item>


            <!--<ion-item class="list-info" *ngIf="policyDetail.ipo!='无'">-->
                <!--<span class="first-info">下期保险费（含IPO）</span>-->
                <!--<span>-->
                    <!--{{(policyDetail.nextPremiunmIPO && policyDetail.nextPremiunmIPO != '-1.00')?('￥'+(policyDetail.nextPremiunmIPO)):'-'}}-->
                <!--</span>-->
            <!--</ion-item>-->
            <!--<ion-item class="list-info" >-->
                <!--<span class="first-info">下期保险费（不含IPO）</span>-->
                <!--<span>-->
                    <!--{{(policyDetail.paymentNext && policyDetail.paymentNext != '-1.00')?('￥'+(policyDetail.paymentNext)):'-'}}-->
                <!--</span>-->
            <!--</ion-item>-->
            <ion-item class="list-info">
                <!--<span class="first-info">下期保险费<span *ngIf="policyDetail.ipoFlag != 'N'">（含IPO）</span></span>-->
                <span class="first-info" *ngIf="policyDetail.ipoFlag != 'N'">下期保险费（含IPO）</span>
                <span class="first-info" *ngIf="policyDetail.ipoFlag === 'N'">下期保险费</span>
                <!--<span>-->
                    <!--{{(policyDetail.nextPremiunmIPO && policyDetail.nextPremiunmIPO != '-1.00')?('￥'+(policyDetail.nextPremiunmIPO)):'-'}}-->
                <!--</span>-->
                <span>
                    {{(policyDetail.paymentNext && policyDetail.paymentNext != '-1.00')?('￥'+(policyDetail.paymentNext)):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info" *ngIf="policyDetail.ipoFlag != 'N'">
                <span class="first-info">下期保险费（不含IPO）</span>
                <span>
                    {{(policyDetail.nextPremiunmIPO && policyDetail.nextPremiunmIPO != '-1.00')?('￥'+(policyDetail.nextPremiunmIPO)):'-'}}
                </span>
                <!--<span>-->
                    <!--{{(policyDetail.paymentNext && policyDetail.paymentNext != '-1.00')?('￥'+(policyDetail.paymentNext)):'-'}}-->
                <!--</span>-->
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">缴费方式</span>
                <span>
                    {{policyDetail.paymentMethod?policyDetail.paymentMethod.replace('—','-'):'-'}}
                    <img [groupShowOrHide]="group6" src="./assets/images/policy/arrow-up.png" alt="">
                </span>
            </ion-item>
            <div #group6>
                <ion-item class="list-info">
                    <span class="first-info gray">缴费银行</span>
                    <span class="gray">
                        {{policyDetail.paymentBank?policyDetail.paymentBank.replace('—','-'):'-'}}
                    </span>
                </ion-item>
                <ion-item class="list-info">
                    <span class="first-info gray">自动转账缴费账户</span>
                    <span class="gray">
                        {{policyDetail.paymentAccount?policyDetail.paymentAccount.replace('—','-'):'-'}}
                    </span>
                </ion-item>
                <ion-item class="list-info  " (click)="goToTransferRecordsPage(policyDetail.policyID)">
                    <span class="first-info gray">银行转账记录</span>
                    <span class="green">
                        点击查看
                        <img src="assets/images/policy/arrow-right-s.png" alt="">
                    </span>
                </ion-item>
                <ion-item class="list-info">
                    <span class="first-info gray">投保人领款银行</span>
                    <span class="gray">
                        {{policyDetail.policyHolderBank?policyDetail.policyHolderBank.replace('—','-'):'-'}}
                    </span>
                </ion-item>
                <ion-item class="list-info">
                    <span class="first-info gray">投保人领款账户</span>
                    <span class="gray">
                        {{policyDetail.policyHolderAccount?policyDetail.policyHolderAccount.replace('—','-'):'-'}}
                    </span>
                </ion-item>

            </div>

            <ion-item class="list-info no-last">
                <span class="first-info">预交保费</span>
                <span>
                        {{policyDetail.prepaidPremium?('￥'+(policyDetail.prepaidPremium)):'-'}}
                    </span>
            </ion-item>

        </div>
    </ion-list>
    <ion-list>
        <ion-list-header>
            <span class="first">合同详情</span>
            <img [groupShowOrHide]="group7" src="./assets/images/policy/arrow-d.png" alt="">
        </ion-list-header>
        <div #group7 [style.display]="'none'">
            <ion-item class="list-info">
                <span class="first-info">合同状态</span>
                <span>
                    {{policyDetail.contractStatus?policyDetail.contractStatus.replace('—','-'):'-'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">合同生效日</span>
                <span>
                    {{policyDetail.contracEffectiveDate*1000|myDate:'YYYY/MM/DD'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">合同失效/终止日</span>
                <span>
                    {{policyDetail.contracDefeasanceDate*1000|myDate:'YYYY/MM/DD'}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">合同期满日</span>
                <span>
                    {{(policyDetail.contractExpirationDate*1000|myDate:'YYYY/MM/DD')>'2900/12/31'?'终身':(policyDetail.contractExpirationDate*1000|myDate:'YYYY/MM/DD')}}
                </span>
            </ion-item>
            <ion-item class="list-info">
                <span class="first-info">合同签收日</span>
                <span>
                    {{policyDetail.contractSignDate*1000|myDate:'YYYY/MM/DD'}}
                </span>
            </ion-item>
            <!--<ion-item class="list-info">-->
                <!--<span class="first-info">电子回访日</span>-->
                <!--<span>-->
                    <!--{{policyDetail.returnVisitDate*1000|myDate:'YYYY/MM/DD'}}-->
                <!--</span>-->
            <!--</ion-item>-->
            <ion-item class="list-info">
                <span class="first-info">犹豫期天数</span>
                <span>
                    {{policyDetail.hesitation?(policyDetail.hesitation+'天'):'-'}}
                </span>
            </ion-item>
        </div>
    </ion-list>

    <p class="prompt">注：以上数据仅供参考！</p>
    <!--<ion-list class="last-list">-->
    <!--<ion-list-header *ngIf="policyDetail.rulUniversalFlag"-->
    <!--(click)='goToUniversalAccountDetailPage(policyDetail.policyID)'>-->
    <!--<span class="first">万能账户明细</span>-->
    <!--<span class="green">-->
    <!--点击查看-->
    <!--<img src="assets/images/policy/arrow-right-s.png" alt="">-->
    <!--</span>-->

    <!--</ion-list-header>-->
    <!--</ion-list>-->

</ion-content>
